<template>
    <div class="div-header">
        <div class="div-icon"></div>
        <div class="div-text">{{setText}}</div>
        <div class="div-tag" v-if='tagActive'>
        <slot  name="tag">
        </slot>
        </div>
        <div class="div-url" v-if='urlActive'>
        <slot  name="url">
        </slot>
        </div>
    </div>
</template>

<script>

export default {
  name: 'divHeader',
  props:{
    setText: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
        tagActive:true,
        urlActive:true,
    }
  },
  computed: {

  },

  mounted(){

  },

  methods: {
    }
}
</script>

<style  lang="scss" scoped>
    .div-header{
        width:100%;
        height:32px;
        display: flex;
        align-items:center;
        padding-left:8px;
        .div-icon{
            width: 5px;
            height: 16px;
            background: #D81E06;
            // position: absolute;
            float:left;
            // margin-left:12px;
            // margin-top:8px;
        }
        .div-text{
            // position: absolute;
            float:left;
            margin-left:11px;
            // margin-top:4px;
            font-size: 16px;
            // font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #383838;
            // line-height: 27px;
        }
        .div-tag{
            background: #FCF37B;
            border-radius: 17px;
            font-size: 16px;
            font-weight: 400;            
            float:left;
            margin-left:8px;
            // margin-top:11px;
            padding-left:8px;
            padding-right:8px;
            line-height:24px;
        }
        .div-url{
            float:right;
            margin-right:12px;
            margin-top:12px;
            font-size: 16px;
            // font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
            font-weight: 400;
            color: #4884FF;
            line-height: 20px;
        }
    }

</style>
